import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import StarNorIcon from '../../images/ic_star_small_nor.png'
import StarPreIcon from '../../images/ic_star_small_pre.png'

import './index.less'

type IStarScoreProps = {
  itemWH: number,
  spacePadding: number,
  disabled: boolean,
  score: number,
  onScoreChange?: (score: number, extData: any) => void,
  max: number,
  extData?: any
}

export default class StarScore extends Component<IStarScoreProps, {}> {

  static defaultProps = {
    disabled: false,
    score: 0,
    max: 5,
    itemWH: 28,
    spacePadding: 4,
    extData: {}
  }

  static externalClasses = ['sd-class']

  render () {
    const { itemWH, spacePadding, score, max } = this.props

    return (
      <View className='container sd-class' style={`width: ${itemWH * max + (max - 1) * spacePadding}rpx;`}>
        {
          Array.from({length: max}, (_, v) => v).map((_, index) => {
            return index < score ? <Image className='star-item' style={`width: ${itemWH}rpx; height: ${itemWH}rpx; margin-left:${spacePadding}rpx;`} src={StarPreIcon} key={index} onClick={this.onImageTaped.bind(this, index)} />
              : <Image className='star-item' style={`width: ${itemWH}rpx; height: ${itemWH}rpx; margin-left:${spacePadding}rpx;`} src={StarNorIcon} key={index} onClick={this.onImageTaped.bind(this, index)} />
          })
        }
      </View>
    )
  }

  onImageTaped = (index) => {
    const { disabled, extData } = this.props
    if (disabled) { return }
    this.props.onScoreChange && this.props.onScoreChange(index + 1, extData)
  }
}
